import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux' // 大括号用于直接解构

// const state1 = {
//   num: 0
// }

// 用于通过动作 创建新的state
// reducer 有2个作用， 1.初始化数据 2.通过获取动作，改变数据
const reducer = function (state={num: 0}, action) {
  console.log(action)
  switch (action.type) {
    case 'add':
      state.num++
      break
    case 'sub':
      state.num--
      break
    default: break
  }
  return { ...state } // 相当于对象的copy, 返回一个新的状态
}

// 创建仓库
const store = createStore(reducer)
console.log(store)

function add() {
  // 通过仓库的方法dispatch进行修改数据
  store.dispatch({ type: 'add', msg: 'helloworld' })
}
function sub() {
  // 通过仓库的方法dispatch进行修改数据
  store.dispatch({ type: 'sub' })
}
// 函数式计数器
const Counter = function () {
  let state = store.getState()
  return (
    <div>
      <h2>counter: { state.num }</h2>
      <button onClick={ add }>计数 +1</button>
      <button onClick={ sub }>计数 -1</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('root'))

store.subscribe(() => {
  ReactDOM.render(<Counter />, document.getElementById('root'))
})